<template>
  <div>
    <el-drawer
      v-if="visible"
      :visible.sync="visible"
      direction="rtl"
      :with-header="false"
      :append-to-body="true"
      class="security"
      @close="handleClose"
    >
      <div :class="stepList.length > 0 ? 'container container-top':'container'">
        <div class="fix-top">
          <div class="drawer-title">安检单详情--{{ temp.checkId }}</div>
          <div v-if="stepList.length > 0" class="step-line">
            <el-steps :active="stepList.length" class="step">
              <el-step v-for="(item,index) in stepList" :key="index">
                <i v-if="(repairData.length>0 && item === '整改详情' && repairData[0].repairStatus === 1) || (recheckData.length>0 && item === '复检详情' && !recheckData[recheckData.length-1][0].recheckStatus)" slot="icon" class="el-icon-circle-check" style="color: #909399;" @click="stepTo(item)" />
                <i v-else slot="icon" class="el-icon-circle-check" @click="stepTo(item)" />
                <el-badge v-if="recheckData.length>1 && item === '复检详情'" slot="title" :value="recheckData.length">
                  <span @click="stepTo(item)">
                    {{ item }}
                    <template v-if="item ==='复检详情'">
                      （{{ (recheckData[recheckData.length-1][0].recheckStatus === 1 || !recheckData[recheckData.length-1][0].recheckStatus) ? '待核查' : recheckData[recheckData.length-1][0].recheckStatus === 2 ? '通过' : recheckData[recheckData.length-1][0].recheckStatus === 3 ? '不通过' : '' }}）
                    </template>
                  </span>
                </el-badge>
                <span v-else slot="title" :class="(repairData.length>0 && item === '整改详情' && repairData[0].repairStatus === 1) || (recheckData.length>0 && item === '复检详情' && !recheckData[recheckData.length-1][0].recheckStatus) ? 'grayColor':''" style="margin-left: -15px;" @click="stepTo(item)">{{ item }}
                  <template v-if="item==='安检信息'">
                    （{{ checkData[0].warnLevelName }}）
                  </template>
                  <template v-if="item==='整改详情'">
                    （{{ repairData[0].repairStatus === 1 ? '待整改' : recheckData.length>0 ? '不合格' : '合格' }}）
                  </template>
                  <template v-if="item ==='复检详情'">
                    （{{ (recheckData[recheckData.length-1][0].recheckStatus === 1 || !recheckData[recheckData.length-1][0].recheckStatus) ? '待核查' : recheckData[recheckData.length-1][0].recheckStatus === 2 ? '通过' : recheckData[recheckData.length-1][0].recheckStatus === 3 ? '不通过' : '' }}）
                  </template>
                </span>
              </el-step>
            </el-steps>
          </div>
        </div>
        <div class="main">
          <div id="printMyDetail" class="main-left">
            <el-collapse v-model="activeNames" class="collapse">
              <el-collapse-item title="客户信息" name="1">
                <div class="box">
                  <el-table :data="customerData" border class="table" style="width: 100%;">
                    <el-table-column prop="csmName" label="客户名称" width="100" align="center">
                      <template slot-scope="scope">
                        <span class="csmCode" @click="showCsmDetail(scope.row)">{{ scope.row.csmName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="csmType" label="客户类型" width="100" align="center">
                      <template slot-scope="scope">
                        {{ formatColumnMap(customerTypeMap, 'value', scope.row.csmType, 'desc') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="subType" label="用气性质" width="100" align="center">
                      <template slot-scope="scope">
                        {{ formatColumnMap(subTypeAllList, 'value', scope.row.subType, 'label') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="csmPhone" label="联系电话" width="110" align="center" />
                    <el-table-column prop="csmAddress" label="客户地址" min-width="150" align="center" />
                    <el-table-column prop="orgName" label="所属机构" align="center" />
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item v-if="taskData.length>0" title="任务单详情" name="2" class="taskData">
                <div class="box task">
                  <el-table :data="taskData" border class="table" style="width: 100%;">
                    <el-table-column prop="createUser" label="下发人" width="150" align="center" />
                    <el-table-column prop="createTime" label="下发时间" min-width="110" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.createTime ? parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="orgName" label="下发机构" min-width="120" align="center" />
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="即查即改详情" name="3" class="taskData">
                <div class="box task">
                  <el-table :data="checkItemsData.checkanFix" border class="table" style="width: 100%;">
                    <el-table-column prop="modificationCount" label="可即查即改项" width="150" align="center" />
                    <el-table-column prop="modificationEdCount" label="已整改" min-width="110" align="center" />
                    <el-table-column prop="isIntention" label="是否有意向" min-width="120" align="center" />
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="安检信息" name="4" class="checkData">
                <div class="box">
                  <el-table :data="checkData" border :span-method="arraySpanMethod" class="table" style="width: 100%;">
                    <el-table-column prop="checkId" label="安检单号" width="120" align="center" />
                    <el-table-column prop="orgName" label="安检机构" align="center" />
                    <el-table-column prop="checkTypeName" label="安检类型" align="center" />
                    <el-table-column prop="checkUser" label="安检人" align="center" />
                    <el-table-column prop="driverName" label="大车司机" align="center" />
                    <el-table-column prop="escortName" label="押运员" align="center" />
                    <el-table-column prop="checkDt" label="安检时间" min-width="120" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.checkDt ? parseTime(scope.row.checkDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="orderCode" label="关联订单" align="center">
                      <template slot-scope="scope">
                        <span v-if="$parent.openOrderDetail" class="csmCode" @click="openOrderDetail(scope.row)">{{ scope.row.orderCode }}</span>
                        <span v-else @click="openOrderDetail(scope.row)">{{ scope.row.orderCode }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div v-if="checkData[0] && checkData[0].warnLevelName" :class="checkData[0].warnLevelName === '无隐患' ? 'circle green' : 'circle red'">
                    {{ checkData[0].warnLevelName }}
                  </div>
                  <div class="check-content">
                    <h4>安检内容</h4>
                    <div class="check-warp">
                      <div v-for="(ele,index) in checkItemsData.typeList" :key="index" class="check-item">
                        <div class="item-title">{{ ele.checkTypeName }}</div>
                        <div v-for="(item,idx) in ele.billItemList" :key="idx" class="item-desc">
                          <p>
                            <span>{{ item.itemName }} </span>
                            <span v-if="item.isIntention===2" class="item-red">有意向</span>
                            <span v-if="item.modificationType===2" class="item-blue">即查即改</span>
                            <span v-if="item.warnLevelName&&item.warnLevel>0" class="item-red">{{ item.warnLevelName }}</span>
                            <span v-if="item.modification===2">已整改</span>
                            <span v-if="item.itemDetailName">（{{ item.itemDetailName }}）</span>
                          </p>
                          <p v-if="item.modificationType===2">
                            <span>整改前：</span>
                          </p>
                          <div v-if="item.gasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.gasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                          <p v-if="item.modificationType===2">
                            <span>整改后：</span>
                          </p>
                          <div v-if="item.newGasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.newGasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                        </div>
                      </div>
                      <div v-if="checkItemsData.checkBillImgurl&&checkItemsData.checkBillImgurl.length>0" class="check-item">
                        <div class="item-title">纸质安检单</div>
                        <div class="img-list">
                          <el-image v-for="item in checkItemsData.checkBillImgurl" :key="item" class="image" :src="item" :preview-src-list="[item]" />
                        </div>
                      </div>
                      <div v-if="checkItemsData.warnInformImg&&checkItemsData.warnInformImg.length>0" class="check-item">
                        <div class="item-title">隐患告知单 <el-link type="primary" :underline="false" @click="showHazardNotice(checkItemsData)">(查看电子告知单)</el-link></div>
                        <div class="img-list">
                          <el-image v-for="item in checkItemsData.warnInformImg" :key="item" class="image" :src="item" :preview-src-list="[item]" />
                        </div>
                      </div>
                      <div class="check-item">
                        <div class="item-title">客户签字</div>
                        <el-image v-if="checkData.length>0 && checkData[0].cmSignPict" class="image" :src="checkData[0].cmSignPict" :preview-src-list="[checkData[0].cmSignPict]" />
                      </div>
                    </div>
                  </div>

                </div>
              </el-collapse-item>

              <el-collapse-item v-if="patrolInfo.maps" title="安检项对比信息" name="5">
                <div class="contrast-code"><span>对比安检单:</span><span>{{ patrolInfo.checkId }}</span></div>
                <div class="contrast-content">
                  <div class="box-title">安检项对比：</div>
                  <div v-for="(item, index) in patrolInfo.maps" :key="index" class="box-info">
                    <div class="check-title title-blue">{{ toChinesNum(parseInt(index+1)) }}、{{ item.itemName }} <span>{{ item.isPass===1?'不合格':item.isPass===2?'合格':'' }}</span></div>
                    <div>
                      <span>对比安检单：</span><span>{{ item.checkBillItem.itemDetailName }}</span>
                    </div>
                    <div>
                      <span>巡查安检单：</span><span>{{ item.auditBillItem.itemDetailName }}</span>
                    </div>
                  </div>
                </div>
                <div class="contrast-content">
                  <div class="box-title">照片对比：</div>
                  <div v-for="(item, index) in patrolInfo.picMaps" :key="index" class="box-info">
                    <div class="check-title title-blue">{{ toChinesNum(parseInt(index+1)) }}、{{ item.itemName }} <span>{{ item.isPass===1?'不合格':item.isPass===2?'合格':'' }}</span></div>
                    <div class="imgListCheck">
                      <p>对比安检单：</p>
                      <div>
                        <el-image v-for="(ele,idx) in item.checkFileUrl" :key="idx" class="image-name" :src="ele" :preview-src-list="item.checkFileUrl" />
                      </div>
                    </div>
                    <div class="imgListCheck">
                      <p>巡查安检单：</p>
                      <div>
                        <el-image v-for="(ele,idx) in item.auditFileUrl" :key="idx" class="image-name" :src="ele" :preview-src-list="item.auditFileUrl" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>

              <el-collapse-item v-if="jcData.length>0" title="线下稽查信息" name="6" class="taskData">
                <div class="box task">
                  <el-table :data="jcData" border class="table" style="width: 100%;">
                    <el-table-column prop="auditingCode" label="稽查单号" align="center">
                      <template slot-scope="scope">
                        <span class="csmCode" @click="showJCDetail(scope.row)">{{ scope.row.auditingCode }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="safetyName" label="稽查安全员" align="center" />
                    <el-table-column prop="auditingTime" label="稽查时间" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.auditingTime ? parseTime(scope.row.auditingTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item v-if="ycData.length>0" title="夜查稽查信息" name="7" class="taskData">
                <div class="box task">
                  <el-table :data="ycData" border class="table" style="width: 100%;">
                    <el-table-column prop="auditingCode" label="夜查单号" align="center">
                      <template slot-scope="scope">
                        <span class="csmCode" @click="showYCDetail(scope.row)">{{ scope.row.auditingCode }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="safetyName" label="夜查管理员" align="center" />
                    <el-table-column prop="auditingTime" label="夜查时间" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.auditingTime ? parseTime(scope.row.auditingTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item v-if="repairData.length>0" :title="repairData[0].repairStatus === 1 ? '整改详情(待整改)' :repairData[0].repairStatus === -1?'整改详情(已失效)': recheckData.length>0 ? '整改详情(不合格)': '整改详情(合格)'" name="8" class="repairData">
                <div class="box repair">
                  <el-table :data="repairData" border :span-method="arraySpanMethod2" class="table" style="width: 100%;">
                    <el-table-column prop="traceCode" label="整改单号" width="180" align="center" />
                    <el-table-column prop="orgName" label="整改机构" align="center" />
                    <el-table-column prop="createUser" label="整改人" align="center" />
                    <el-table-column prop="operateDt" label="整改时间" min-width="120" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.operateDt ? parseTime(scope.row.operateDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <div :class="repairData[0].repairStatus === 1 ? 'circle gray' : (recheckData.length>0 || repairData[0].repairStatus === -1) ? 'circle red': 'circle green'">
                    {{ repairData[0].repairStatus === 1 ? '待整改' :repairData[0].repairStatus === -1?'已失效': recheckData.length>0 ? '不合格' : '合格' }}
                  </div>
                  <!-- <el-table :data="repairItemsData" border class="table-item table">
                    <el-table-column prop="itemDetailName" label="隐患项" min-width="200" align="center">
                      <template slot-scope="scope">
                        <div style="padding: 10px 10px 0 10px; text-align: left;">
                          <div>{{ scope.row.index }}、{{ scope.row.itemName }} {{ scope.row.itemDetailName }}</div>
                          <div v-if="scope.row.gasFileUrl" class="image-group">
                            <el-image v-for="(item,index) in scope.row.gasFileUrl" :key="index" class="image" :src="item" :preview-src-list="scope.row.gasFileUrl" />
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table> -->
                  <div class="check-content">
                    <h4>隐患项</h4>
                    <div class="check-warp">
                      <div v-for="(ele,index) in repairItemsData.typeInfoList" :key="index" class="check-item">
                        <div class="item-title">{{ ele.checkTypeName }}</div>
                        <div v-for="(item,idx) in ele.billItemList" :key="idx" class="item-desc">
                          <p>
                            <span>{{ item.itemName }} </span>
                            <span v-if="item.isIntention===2" class="item-red">有意向</span>
                            <span v-if="item.modificationType===2" class="item-blue">即查即改</span>
                            <span v-if="item.warnLevelName&&item.warnLevel>0" class="item-red">{{ item.warnLevelName }}</span>
                            <span v-if="item.modification===2">已整改</span>
                            <span v-if="item.itemDetailName">（{{ item.itemDetailName }}）</span>
                          </p>
                          <p v-if="item.modificationType===2">
                            <span>整改前：</span>
                          </p>
                          <div v-if="item.gasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.gasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                          <p v-if="item.modificationType===2">
                            <span>整改后：</span>
                          </p>
                          <div v-if="item.newGasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.newGasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item v-for="(dataItem,index) in recheckData" :key="index" :title="dataItem[0].xh+'次复检详情'" :name="parseInt(9+index)" class="recheckData">
                <div class="box repair">
                  <el-table :data="dataItem" border :span-method="arraySpanMethod2" class="table" style="width: 100%;">
                    <el-table-column prop="recheckbillCode" label="复检单号" width="180" align="center" />
                    <el-table-column prop="orgName" label="复检机构" align="center" />
                    <el-table-column prop="checkUser" label="复检人" align="center" />
                    <el-table-column prop="checkDt" label="复检时间" min-width="120" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.checkDt ? parseTime(scope.row.checkDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <h4 class="img-result">复检结果照片</h4>
                  <el-image v-for="(itemUrl, key) in dataItem[0].recheckResultPic" :key="key" class="img-content" :src="itemUrl" :preview-src-list="dataItem[0].recheckResultPic" />
                  <div :class="dataItem[0].recheckStatus===2 ? 'circle green': (dataItem[0].recheckStatus===3 || dataItem[0].recheckStatus===-1) ? 'circle red': 'circle gray'">
                    {{ (dataItem[0].recheckStatus === 1 || !dataItem[0].recheckStatus) ? '待核查' : dataItem[0].recheckStatus === 2 ? '通过' : dataItem[0].recheckStatus === 3 ? '不通过' :dataItem[0].recheckStatus === -1?'失效': '' }}
                  </div>
                  <!-- <el-table :data="dataItem[0].billItemList" border class="table-item table">
                    <el-table-column prop="itemDetailName" label="隐患项" min-width="200" align="center">
                      <template slot-scope="scope">
                        <div style="padding: 10px 10px 0 10px; text-align: left;">
                          <div>{{ scope.row.index }}、{{ scope.row.itemName }} {{ scope.row.itemDetailName }}</div>
                          <div v-if="scope.row.gasFileUrl" class="image-group">
                            <el-image v-for="(item, key) in scope.row.gasFileUrl" :key="key" class="image" :src="item" :preview-src-list="scope.row.gasFileUrl" />
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table> -->
                  <div class="check-content">
                    <h4>隐患项</h4>
                    <div class="check-warp">
                      <div v-for="(ele,index1) in dataItem[0].typeInfoList" :key="index1" class="check-item">
                        <div class="item-title">{{ ele.checkTypeName }}</div>
                        <div v-for="(item,idx) in ele.billItemList" :key="idx" class="item-desc">
                          <p>
                            <span>{{ item.itemName }} </span>
                            <span v-if="item.isIntention===2" class="item-red">有意向</span>
                            <span v-if="item.modificationType===2" class="item-blue">即查即改</span>
                            <span v-if="item.warnLevelName&&item.warnLevel>0" class="item-red">{{ item.warnLevelName }}</span>
                            <span v-if="item.modification===2">已整改</span>
                            <span v-if="item.itemDetailName">（{{ item.itemDetailName }}）</span>
                          </p>
                          <p v-if="item.modificationType===2">
                            <span>整改前：</span>
                          </p>
                          <div v-if="item.gasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.gasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                          <p v-if="item.modificationType===2">
                            <span>整改后：</span>
                          </p>
                          <div v-if="item.newGasFileUrl.length>0" class="img-list">
                            <el-image v-for="imgItem in item.newGasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <el-image v-show="false" ref="preview" :src="imgUrl" :preview-src-list="srcList" />
          </div>
          <div class="main-right">
            <div class="timeline">
              <div class="timeline-title">流转信息</div>
              <el-timeline>
                <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}`" placement="top">
                  <el-card>
                    <p>{{ item.traceDesc }}</p>
                    <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
                    <div style="margin-top: 5px;"><span>发生部门---</span>{{ item.orgName }}</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="btn-group">
          <div class="btns">
            <el-button v-print="'#printMyDetail'" v-permission="[60101, 3]" type="primary">打印</el-button>
            <el-button v-if="temp.repairStatus === 1 && stepList.length > 0 && stepList[stepList.length - 1].indexOf('整改详情') > -1" v-permission="[60104, 3]" type="warning" @click="openCheck">整改核查</el-button>
            <el-button v-if="temp.recheckStatus !== 2 && stepList.length > 0 && stepList[stepList.length - 1].indexOf('复检详情') > -1" v-permission="[60105, 3]" type="danger" @click="reCheck">复检核查</el-button>
          </div>
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <csm-detail ref="csmDetail" :tree-data="treeData" />
    <check ref="check" />
    <recheck ref="reCheck" :parent-fetch-data="refresh" />
    <jcDetail ref="jcDetail" />
    <ycDetail ref="ycDetail" />
    <repairDetail ref="repairDetail" />
    <hazardNotice ref="hazardNotice" />
  </div>
</template>

<script>
  import { querySubTypeMap, gasCheckQueryDetail, gasWarningTraceDetail, queryRecheckRecord, csmGasCheckByCheckId, queryOrderFlowInfoCommon, auditingQuerybyCheckId, gasCheckBillPatrol } from '@/api'
  import { parseTime, formatColumnMap, toChinesNum } from '@/utils'
  import { imgBaseUrl } from '@/utils/config'
  import print from 'vue-print-nb'
  import check from '../../riskTrack/components/Check.vue'
  import recheck from '../../re-inspection/components/reCheck.vue'
  import jcDetail from './jcDetail.vue'
  import ycDetail from './ycDetail.vue'
  import hazardNotice from './hazardNotice.vue'
  export default {
    name: 'securityOrderInfo',
    directives: {
      print
    },
    components: {
      csmDetail: () => import('../../../components/CsmDetailModal/index.vue'),
      repairDetail: () => import('../../../workOrderCenter/repairOrder/components/Detail.vue'),
      check,
      recheck,
      jcDetail,
      ycDetail,
      hazardNotice
    },
    props: {
      treeData: {
        type: Array,
        required: true
      },
      parentFetchData: {
        type: Function
      }
    },
    data() {
      return {
        baseSrc: process.env.VUE_APP_BASE_IMGURL,
        visible: false,
        parseTime,
        temp: {},
        activeNames: ['1', '2', '3', '4', '5', '6', 7, 8],
        customerTypeMap: [
          { value: 1, desc: '居民用户', key: 'Resident_user' },
          { value: 2, desc: '非居民用户', key: 'Business_user' },
          { value: 8, desc: '瓶批用户', key: 'BOTTLE_user' },
          { value: 16, desc: '槽批用户', key: 'GROOVE_user' }
        ],
        subTypeAllList: [],
        customerData: [],
        taskData: [],
        checkData: [],
        checkItemsData: {},
        repairData: [],
        repairItemsData: {},
        recheckData: [],
        recheckItemsData: [],
        flowInfoData: [],
        imgUrl: '',
        srcList: [],
        stepList: [],
        dType: '',
        jcData: [],
        ycData: [],
        patrolInfo: {}
      }
    },
    methods: {
      formatColumnMap,
      toChinesNum,
      async open(temp, type) {
        const res1 = await querySubTypeMap({ })
        this.subTypeAllList = res1.data
        this.visible = true
        if (temp) {
          this.temp = temp
          this.dType = type
          // this.customerData = [this.temp]
          // this.customerData[0].orgName = this.customerData[0].nearStationName
          await this.initData()
          if (type) {
            this.stepTo(type)
          }
        }
      },
      async initData() {
        this.taskData = []
        this.checkData = []
        this.checkItemsData = {}
        this.repairData = []
        this.repairItemsData = {}
        this.recheckData = []
        this.recheckItemsData = []
        this.flowInfoData = []
        this.stepList = []
        this.patrolInfo = {}
        await this.csmGasCheckByCheckId()
        await this.gasCheckQueryDetail()
        await this.queryRecheckRecord()
        await this.gasWarningTraceDetail()
        await this.gasCheckBillTrace()
        this.gasCheckBillPatrolData()
      },
      // 查询安检项明细
      async gasCheckQueryDetail() {
        const res = await gasCheckQueryDetail({ checkId: this.temp.checkId })
        if (res.data) {
          const data = res.data
          this.customerData = [res.data]
          this.checkData = [
            {
              billType: data.billType,
              checkId: data.checkId,
              orgName: data.orgName,
              checkTypeName: data.checkType === 1 ? '随单安检' : data.checkType === 2 ? '定期安检' : '',
              checkUser: data.checkUser,
              driverName: data.driverName,
              escortName: data.escortName,
              checkDt: data.checkDt,
              orderCode: data.orderCode,
              warnLevelName: data.warnLevelName,
              cmSignPict: data.cmSignPict ? imgBaseUrl + data.cmSignPict : ''
            },
            {
              checkId: '备注：',
              orgName: data.remark
            }
          ]
          this.stepList.push('安检信息')
          this.checkItemsData = data
          this.checkItemsData.checkanFix = [
            {
              modificationCount: this.checkItemsData.modificationCount,
              modificationEdCount: this.checkItemsData.modificationEdCount,
              isIntention: this.checkItemsData.isIntention ? this.checkItemsData.isIntention === 1 ? '无意向' : this.checkItemsData.isIntention === 2 ? '有意向' : '' : ''
            }
          ]
          this.checkItemsData.typeList = data.typeList.map((item) => ({
            ...item,
            billItemList: item.billItemList.map((ele) => ({
              ...ele,
              gasFileUrl: (ele.gasFileUrl ? ele.gasFileUrl.split(',') : []).map(e => (imgBaseUrl + e)),
              newGasFileUrl: (ele.newGasFileUrl ? ele.newGasFileUrl.split(',') : []).map(e => (imgBaseUrl + e))
            }))
          }))
          this.checkItemsData.checkBillImgurl = (this.checkItemsData.checkBillImgurl ? this.checkItemsData.checkBillImgurl.split(',') : []).map(e => (imgBaseUrl + e))
          this.checkItemsData.warnInformImg = (this.checkItemsData.warnInformImg ? this.checkItemsData.warnInformImg.split(',') : []).map(e => (imgBaseUrl + e))
        }
        const info = await auditingQuerybyCheckId({ checkId: this.temp.checkId })
        if (info.data) {
          console.log(info.data)
          const jcInfo = info.data.find(item => item.type === 2)
          if (jcInfo) {
            this.jcData = [jcInfo]
            console.log(this.jcData)
          }
          const ycInfo = info.data.find(item => item.type === 3)
          if (ycInfo) {
            this.ycData = [ycInfo]
            console.log(this.ycData)
          }
        }
      },
      // 查询整改单详情
      async gasWarningTraceDetail() {
        const res = await gasWarningTraceDetail({ checkId: this.temp.checkId })
        const data = res.data
        if (data.length > 0) {
          this.temp.repairStatus = data[data.length - 1].repairStatus
          this.temp.traceCode = data[data.length - 1].traceCode
          if (this.stepList.indexOf('复检详情') > -1) {
            const i = this.stepList.findIndex((step) => step === '复检详情')
            this.stepList.splice(i, 0, '整改详情')
          } else {
            this.stepList.push('整改详情')
          }
          this.repairData = [
            {
              traceCode: data[0].traceCode,
              orgName: data[0].orgName,
              createUser: data[0].createUser,
              operateDt: data[0].operateDt,
              repairStatus: data[0].repairStatus
            },
            {
              traceCode: '备注：',
              orgName: data[0].remark ? data[0].remark : ''
            }
          ]

          if (data[0]) {
            this.repairItemsData = data[0]
            this.repairItemsData.typeInfoList = this.repairItemsData.typeInfoList.map((item) => ({
              ...item,
              billItemList: item.billItemList.map((ele) => ({
                ...ele,
                gasFileUrl: (ele.gasFileUrl ? ele.gasFileUrl.split(',') : []).map(e => (imgBaseUrl + e)),
                newGasFileUrl: (ele.newGasFileUrl ? ele.newGasFileUrl.split(',') : []).map(e => (imgBaseUrl + e))
              }))
            }))
            this.repairItemsData.checkBillImgurl = (this.repairItemsData.checkBillImgurl ? this.repairItemsData.checkBillImgurl.split(',') : []).map(e => (imgBaseUrl + e))
          }
        }
      },
      // 复检单详情
      async queryRecheckRecord() {
        const res = await queryRecheckRecord({ checkId: this.temp.checkId })
        const data = res.data
        if (data.length > 0) {
          this.temp.recheckStatus = data[data.length - 1].recheckStatus === 0 ? 1 : data[data.length - 1].recheckStatus === 2 ? 2 : data[data.length - 1].recheckStatus === 3 ? 3 : 0
          this.temp.recheckbillCode = data[data.length - 1].recheckbillCode
          this.stepList.push('复检详情')
          data.forEach((item, index) => {
            // if (!item.billItemList) {
            //   item.billItemList = []
            //   this.checkItemsData2.forEach((item2) => {
            //     if (item2.warnLevel > 0) {
            //       const obj = { ...item2 }
            //       obj.gasFileUrl = ''
            //       item.billItemList.push(obj)
            //     }
            //   })
            // }
            this.recheckData[index] = []
            this.recheckData[index].push(item)
            this.recheckData[index].push({
              recheckbillCode: '备注：',
              orgName: item.remark
            })
            if (this.recheckData[index][0].typeInfoList && this.recheckData[index][0].typeInfoList.length > 0) {
              this.recheckData[index][0].typeInfoList = this.recheckData[index][0].typeInfoList.map((item1) => ({
                ...item1,
                billItemList: item1.billItemList && item1.billItemList.length > 0 ? item1.billItemList.map((ele) => ({
                  ...ele,
                  gasFileUrl: (ele.gasFileUrl ? ele.gasFileUrl.split(',') : []).map(e => (imgBaseUrl + e)),
                  newGasFileUrl: (ele.newGasFileUrl ? ele.newGasFileUrl.split(',') : []).map(e => (imgBaseUrl + e))
                })) : []
              }))
              this.recheckData[index][0].checkBillImgurl = (this.recheckData[index][0].checkBillImgurl ? this.recheckData[index][0].checkBillImgurl.split(',') : []).map(e => (imgBaseUrl + e))
            }
            this.recheckData[index][0].recheckResultPic = (item.recheckResultPic ? item.recheckResultPic.split(',') : []).map(e => (imgBaseUrl + e))
          })
          console.log('recheckData', this.recheckData)
        }
      },
      // 任务单
      async csmGasCheckByCheckId() {
        const res = await csmGasCheckByCheckId({ checkId: this.temp.checkId })
        if (res.data) {
          this.taskData = [res.data]
          this.stepList.push('任务单详情')
        }
      },
      // 流转信息
      async gasCheckBillTrace() {
        const params = {}
        if (this.dType && this.dType === '复检详情') {
          params.billCode = this.temp.recheckbillCode
          params.billType = 1024
        }
        if (this.dType && this.dType === '整改详情') {
          params.billCode = this.repairData[0].traceCode
          params.billType = 32
        }
        if (params && params.billCode) {
          const res = await queryOrderFlowInfoCommon(params)
          this.flowInfoData = res.data
        } else {
          this.flowInfoData = []
        }
      },
      // 安检对比项
      async gasCheckBillPatrolData() {
        const res = await gasCheckBillPatrol({ checkId: this.temp.checkId })
        if (res && res.data) {
          this.patrolInfo = res.data
          if (this.patrolInfo.picMaps && this.patrolInfo.picMaps.length > 0) {
            this.patrolInfo.picMaps.forEach((item, index) => {
              if (item.auditBillItem && item.auditBillItem.gasFileUrl) {
                this.patrolInfo.picMaps[index]['auditFileUrl'] = item.auditBillItem.gasFileUrl ? item.auditBillItem.gasFileUrl.split(',') : []
                this.patrolInfo.picMaps[index]['auditFileUrl'] = item.auditFileUrl.map(ele => (this.baseSrc + ele))
              }
              if (item.checkBillItem && item.checkBillItem.gasFileUrl) {
                this.patrolInfo.picMaps[index]['checkFileUrl'] = item.checkBillItem.gasFileUrl ? item.checkBillItem.gasFileUrl.split(',') : []
                this.patrolInfo.picMaps[index]['checkFileUrl'] = item.checkFileUrl.map(ele => (this.baseSrc + ele))
              }
            })
          }
        }
      },
      // 去重
      unique(arr) {
        const res = new Map()
        return arr.filter((item) => !res.has(item.itemId) && res.set(item.itemId, 1))
      },
      unique2(arr) {
        const data = []
        arr.forEach((item) => {
          if (item.itemType === 1 || item.itemType === 3) {
            if (item.isChecked) {
              data.push(item)
            }
          } else {
            data.push(item)
          }
        })
        return data
      },
      unique3(arr) {
        var array = Object.values(arr.reduce((res, item) => {
          res[item.itemId] ? res[item.itemId].push(item) : res[item.itemId] = [item]
          return res
        }, {}))
        var data = []
        array.forEach((item) => {
          item.forEach((item2) => {
            if (item2.itemType === 3) {
              item2.itemNameList = [{ itemDetailName: item2.itemDetailName, warnLevel: item2.warnLevel }]
            }
          })
        })
        array.forEach((item) => {
          if (item.length > 0) {
            let has = false
            item.forEach((item2) => {
              if (item2.isChecked) {
                has = true
                let has2 = false
                data.forEach((item3) => {
                  if (item2.itemId === item3.itemId && item3.itemType === 3) {
                    has2 = true
                    item3.itemNameList.push({ itemDetailName: item2.itemDetailName, warnLevel: item2.warnLevel })
                    if (item3.gasFileUrl && item2.gasFileUrl) {
                      item3.gasFileUrl = item3.gasFileUrl + ',' + item2.gasFileUrl
                    }
                    if (!item3.gasFileUrl && item2.gasFileUrl) {
                      item3.gasFileUrl = item2.gasFileUrl
                    }
                  }
                })
                if (!has2) {
                  data.push(item2)
                }
              }
            })
            if (!has) {
              data.push(item[0])
            }
          }
        })
        return data
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          if (columnIndex === 1) {
            return [2, 5]
          } else if (columnIndex === 5) {
            return [0, 0]
          }
        }
      },
      arraySpanMethod2({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          if (columnIndex === 1) {
            return [2, 4]
          } else if (columnIndex === 4) {
            return [0, 0]
          }
        }
      },
      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
        if ((columnIndex === 0 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) && rowIndex !== this.repairItemsData.length - 1) {
          if (rowIndex === 0) {
            return {
              rowspan: this.repairItemsData.length - 1,
              colspan: 1
            }
          }
          return {
            rowspan: 0,
            colspan: 0
          }
        }
        if (columnIndex === 1 && rowIndex === this.repairItemsData.length - 1) {
          return [2, 6]
        } else if (columnIndex === 6) {
          return [0, 0]
        }
      },
      // 处理要合并相同行的列
      getSpanArr(data) {
        this.spanArr1 = []
        this.spanArr2 = []
        this.spanArr3 = []
        this.spanArr4 = []
        this.spanArr5 = []
        this.spanArr6 = []
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            this.spanArr1.push(1)
            this.spanArr2.push(1)
            this.spanArr3.push(1)
            this.spanArr4.push(1)
            this.spanArr5.push(1)
            this.spanArr6.push(1)
            this.pos1 = 0
            this.pos2 = 0
            this.pos3 = 0
            this.pos4 = 0
            this.pos5 = 0
            this.pos6 = 0
          } else {
            if (data[i].xh === data[i - 1].xh) {
              this.spanArr1[this.pos1] += 1
              this.spanArr1.push(0)
            } else {
              this.spanArr1.push(1)
              this.pos1 = i
            }
            if (data[i].recheckbillCode === data[i - 1].recheckbillCode) {
              this.spanArr2[this.pos2] += 1
              this.spanArr2.push(0)
            } else {
              this.spanArr2.push(1)
              this.pos2 = i
            }
            if (data[i].itemDetailName === data[i - 1].itemDetailName) {
              this.spanArr3[this.pos3] += 1
              this.spanArr3.push(0)
            } else {
              this.spanArr3.push(1)
              this.pos3 = i
            }
            if (data[i].recheckStatus === data[i - 1].recheckStatus) {
              this.spanArr4[this.pos4] += 1
              this.spanArr4.push(0)
            } else {
              this.spanArr4.push(1)
              this.pos4 = i
            }
            if (data[i].checkUser === data[i - 1].checkUser) {
              this.spanArr5[this.pos5] += 1
              this.spanArr5.push(0)
            } else {
              this.spanArr5.push(1)
              this.pos5 = i
            }
            if (data[i].checkDt === data[i - 1].checkDt) {
              this.spanArr6[this.pos6] += 1
              this.spanArr6.push(0)
            } else {
              this.spanArr6.push(1)
              this.pos6 = i
            }
          }
        }
      },
      ObjectSpanMethod3({ row, column, rowIndex, columnIndex }) {
        // 合并相同列数据的行
        if (columnIndex === 0) {
          const _row = this.spanArr1[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        // 合并相同列数据的行
        if (columnIndex === 1) {
          const _row = this.spanArr2[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 2) {
          const _row = this.spanArr3[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        // 合并相同列数据的行
        if (columnIndex === 3) {
          const _row = this.spanArr4[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 4) {
          const _row = this.spanArr5[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 5) {
          const _row = this.spanArr6[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      showImg(row) {
        const gasFileUrl = row.gasFileUrl
        this.srcList = gasFileUrl.split(',')
        this.srcList = this.srcList.map((item) => imgBaseUrl + item)
        this.imgUrl = this.srcList[0]
        this.$refs.preview.clickHandler()
      },
      stepTo(step) {
        const recheckDataTop = document.getElementsByClassName('recheckData')[0]
        const repairData = document.getElementsByClassName('repairData')[0]
        const taskData = document.getElementsByClassName('taskData')[0]
        const checkData = document.getElementsByClassName('checkData')[0]
        const security = document.getElementsByClassName('security')[0]
        if (step === '复检详情') {
          if (recheckDataTop) {
            security.getElementsByClassName('el-drawer__body')[0].scrollTop = recheckDataTop.offsetTop - 120
          }
        }
        if (step === '整改详情') {
          if (repairData) {
            security.getElementsByClassName('el-drawer__body')[0].scrollTop = repairData.offsetTop - 120
          }
        }
        if (step === '任务单详情') {
          if (taskData) {
            security.getElementsByClassName('el-drawer__body')[0].scrollTop = taskData.offsetTop - 120
          }
        }
        if (step === '安检信息') {
          if (checkData) {
            security.getElementsByClassName('el-drawer__body')[0].scrollTop = checkData.offsetTop - 120
          }
        }
      },
      async showCsmDetail(row) {
        const csmDetail = document.getElementsByClassName('csmDetail')[0]
        if (!csmDetail) {
          await this.$refs.csmDetail.open(row)
        } else {
          this.$message.warning('该信息弹窗已存在，请关闭当前弹窗')
        }
      },
      async openCheck() {
        await this.$refs.check.open([this.temp])
        this.initData()
        this.parentFetchData()
      },
      // 复核
      async reCheck() {
        await this.$refs.reCheck.open(this.temp.recheckbillCode)
      },
      async openOrderDetail(row) {
        if (row.billType === 2) {
          this.$refs.repairDetail.open({ repairCode: row.orderCode, ...row })
          return
        }
        await this.$parent.openOrderDetail(row)
      },
      async showJCDetail(row) {
        await this.$refs.jcDetail.open(row, 4)
      },
      async showYCDetail(row) {
        await this.$refs.ycDetail.open(row, 4)
      },
      async showHazardNotice(row) {
        await this.$refs.hazardNotice.open(row)
      },
      refresh() {
        this.initData()
        this.parentFetchData()
      },
      handleClose() {
        this.temp = {}
        this.subTypeAllList = []
        this.customerData = []
        this.taskData = []
        this.checkData = []
        this.checkItemsData = {}
        this.repairData = []
        this.repairItemsData = {}
        this.recheckData = []
        this.recheckItemsData = []
        this.flowInfoData = []
        this.imgUrl = ''
        this.srcList = []
        this.stepList = []
        this.dType = ''
        this.jcData = []
        this.ycData = []
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer {
  width: 85% !important;
}
/deep/.el-drawer__body {
  margin-bottom: 60px;
}
/deep/ .el-collapse-item__header {
  height: 38px;
  padding-left: 10px;
  font-size: 14px;
  line-height: 38px;
  color: #38BDBD;
  border-left: 5px solid #38BDBD;
}
.container {
  padding: 20px;
  margin-top: 30px;
  .drawer-title {
    margin-bottom: 20px;
  }
  .step-line {
    width: 100%;
    .step {
      width: 85%;
      margin-left: 10%;
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .main-left {
      width: 72%;
      height: 300px;
      // border: 1px solid black;
    }
    .main-right {
      width: 26%;
      height: 300px;
      .timeline {
        margin-top: 20px;
      }
      .timeline-title {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        color: white;
        background-color: #38BDBD;
        border-radius: 5px;
      }
    }
  }
}
.container-top {
  margin-top: 100px;
}
.circle {
  position: relative;
  left: 85%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  padding: 10px;
  margin-top: -50px;
  font-size: 16px;
  font-weight: 600;
  color: #E76E7E;
  text-align: center;
  border-radius: 50%;
  transform: rotateZ(-25deg);
}
.red {
  color: #E76E7E;
  border: 8px solid #E76E7E;
}
.green {
  color: #1ABC9C;
  border: 8px solid #1ABC9C;
}
.gray {
  color: #909399;
  border: 8px solid #909399;
}
.grayColor {
  color: #909399;
}
.image-group {
  display: flex;
  .image {
    width: 120px;
    height: 150px;
    padding: 10px 0;
    margin-right: 15px;
  }
}
.table-item {
  width: 100%;
  margin-top: -60px;
}
.bottom {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 85%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 10px;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.box {
  width: 100%;
  margin: 10px 0;
  .box-title {
    margin-bottom: 10px;
  }
  .item-type {
    padding: 10px;
    letter-spacing: 5px;
    writing-mode: vertical-lr;
  }
  .radio-item {
    height: 30px;
    line-height: 30px;
  }
  .radio-icon {
    position: relative;
    top: 5px;
    width: 20px;
    height: 20px;
  }
  .radio-text {
    margin-left: 10px;
  }
  .row {
    display: flex;
    .row-title {
      font-size: 16px;
      font-weight: 600;
    }
    .image {
      width: 150px;
      height: 180px;
    }
  }
  .img-result {
    padding: 6px 0;
    margin: 0;
    font-size: 14px;
    // border:1px solid #ddd;
    line-height: 24px;
    text-align: center;
    background: #E5E7F2;
  }
  .img-content {
    width: 150px;
    height: 150px;
    margin-left: 10px;
  }
  .check-content {
    h4 {
      padding: 6px 0;
      margin: 0;
      font-size: 14px;
      // border:1px solid #ddd;
      line-height: 24px;
      text-align: center;
      background: #E5E7F2;
    }
    .check-warp {
      padding: 8px;
      border: 1px solid #ddd;
      border-top: 0;
      .check-item {
        margin-bottom: 20px;
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .item-title {
          font-size: 14px;
          font-weight: 600;
        }
        .image,
        .image1 {
          width: 150px;
          height: 180px;
          margin-left: 50px;
        }

        .item-desc {
          p {
            line-height: 24px;
            .item-blue {
              color: #399BFF;
            }
            .item-red {
              color: red;
            }
            span {
              margin-left: 8px;
            }
          }
        }
        .img-list {
          padding-left: 10px;
          .image {
            margin: 0;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
.fix-top {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 85%;
  padding-top: 10px;
  // height: 120px;
  background: white;
}
.el-icon-circle-check {
  font-size: 25px;
}

@media print {
  .main-left {
    zoom: 86.5% !important;
  }
  .table {
    width: 100% !important;
  }
}
.csmCode {
  color: #38BDBD;
  cursor: pointer;
}
.contrast-code {
  padding-left: 10px;
  margin: 10px 0;
}
.contrast-content {
  margin-bottom: 20px;
  .box-title {
    padding-left: 10px;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .box-info {
    padding-left: 10px;
    line-height: 28px;
    .label {
      margin-right: 5px;
    }
    /deep/.el-checkbox {
      display: block;
    }
    .form-item {
      margin-bottom: 20px;
      .label {
        line-height: 50px;
      }
    }
  }
  .imgListCheck {
    div {
      display: flex;
    }
    .image-name {
      display: block;
      width: 100px;
      height: auto;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .title-blue {
    color: #0E81EC;
    span {
      color: red;
    }
  }
}
</style>
